import React, { useState,useEffect,useRef} from "react";
const AnimationVisible = ({ children }) => {
  const elementRef = useRef(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const element = elementRef.current;
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        setVisible(!!entry.isIntersecting);
        if (entry.isIntersecting) {
          console.log("Element is visible");
        } else {
          console.log("Element is not visible");
        }
      });
    });

    observer.observe(element);

    return () => {
      observer.unobserve(element);
    };
  }, []);
  return (
    <div ref={elementRef} className={visible ? "animation" : ""}>
      {children}
    </div>
  );
};
export default AnimationVisible;
